<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <div class="top-content">
        <div class="top-name">{{ typeName }}记录</div>
        <el-button class="pad-back" @click="back()">返回</el-button>
      </div>
      <div class="bottom-content">
        <div class="bottom-box">
          <!-- 选择盒子样式 -->
          <div class="search-box">
            <el-form :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline">
              <el-form-item label="审批状态">
                <div class="my-el-select">
                  <el-select v-model="searchForm.approveStatus" @change="onSubmit" :popper-append-to-body="false" placeholder="请选择">
                    <el-option label="未审批" value="0"></el-option>
                    <el-option label="已审批" value="1"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="时间">
                <div class="my-el-select">
                  <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="handleDate" clearable :editable="false"> </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="my-el-search">
                  <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <!-- 列表渲染 -->
          <div class="list">
            <NxTablePad :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" :isIndex="true" class="table-wrap" @refresh="refresh" :height="'47rem'">
              <template slot="approveStatus" slot-scope="scope">
                <span v-if="scope.row.approveStatus == 0">未审批</span>
                <span v-if="scope.row.approveStatus == 1">已审批</span>
              </template>
              <template slot="operation" slot-scope="scope">
                <el-button type="warning" class="pad-btn" @click="handleDetail(scope.row)">详 情</el-button>
                <el-button type="success" class="pad-btn" :disabled="scope.row.approveStatus == 1" @click="handleApproval(scope.row)">审 批</el-button>
              </template>
            </NxTablePad>
          </div>
        </div>
      </div>
    </div>
    <TransferRecordDetail :detailId="detailId" :detailStatus="detailStatus" :detailIsDialog="detailIsDialog" :infosData="infosData"></TransferRecordDetail>
  </div>
</template>
<script>
import { isFullscreen } from "@/utils/fullscreen";
import NxTablePad from "@/components/NxTablePad.vue";
import { Page } from "@/utils/pagination";
import TransferRecordDetail from "./components/transferRecordDetail.vue";
import { getAdjustOrderWeightPadList, approveAdjustOrderWeightPad } from "@/api/adjustment";
export default {
  components: {
    NxTablePad,
    TransferRecordDetail,
  },
  data() {
    return {
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        approveStatus: "",
        companyId: "",
        baseId: "",
        startDate: "",
        endDate: "",
        code: "",
      },
      // 表格字段
      tableCols: [
        {
          label: "调整单号",
          prop: "code",
          align: "center",
        },
        {
          label: "调整入类型",
          prop: "inTypeName",
          align: "center",
          // width: "110",
        },
        {
          label: "调整出类型",
          prop: "outTypeName",
          align: "center",
          // width: "110",
        },
        {
          label: "审批状态",
          slot: "approveStatus",
          align: "center",
        },
        {
          label: "调整时间",
          prop: "adjustDate",
          align: "center",
        },
        {
          label: "备注",
          prop: "remark",
          align: "center",
        },
        {
          label: "操作",
          slot: "operation",
          align: "center",
          width: "200",
          fixed: "right",
        },
      ],
      tableData: [],
      date: [], // 日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pagination: new Page(),
      detailId: "", //详情rowid
      detailStatus: "deatail",
      detailIsDialog: false, //详情审核页面状态
      typeName: "",
      infosData: [], // 转移记录详情
      userType: "", // 用户类型（0超级管理员，1公司管理员，2公司员工）
    };
  },
  mounted() {
    // 初始化加载
    this.userType = Number(window.localStorage.getItem("userType"));
    this.searchForm.userType = this.userType;
    this.searchForm.companyId = this.$route.query.companyId;
    this.searchForm.baseId = this.$route.query.baseId;
    this.typeName = this.$route.query.typeName;
    this.getList();
    if (!isFullscreen()) {
      let ele = document.body;
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
      }
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1);
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1;
      this.getList();
    },

    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum;
      this.searchForm.pageSize = val.pageSize;
      this.getList();
    },
    // 查询列表
    getList() {
      getAdjustOrderWeightPadList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.pagination.count = res.data.total;
        }
      });
    },
    // 详情
    handleDetail(row) {
      this.detailId = row.id + "";
      this.detailStatus = "see";
      this.detailIsDialog = true;
    },
    //审批
    handleApproval(row) {
      this.$confirm("正在对该入库记录进行审批是否通过?", "提示", {
        confirmButtonText: "通过",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          approveAdjustOrderWeightPad({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 重置表单
    resetForm() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        approveStatus: "",
        companyId: "",
        baseId: "",
        startDate: "",
        endDate: "",
        code: "",
      };
      this.date = [];

      this.onSubmit();
    },
    // 日期切换
    handleDate() {
      if (this.date && this.date.length == 2) {
        this.searchForm.startDate = this.date[0];
        this.searchForm.endDate = this.date[1];
      } else {
        this.searchForm.startDate = "";
        this.searchForm.endDate = "";
      }

      this.onSubmit();
    },
    // 关闭详情 审批状态
    closedeatailCheck() {
      this.deatailCheckIsDialog = false;
    },
    // 关闭详情
    closeAddEdit() {
      this.detailIsDialog = false;
    },
  },
};
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .top-content {
      width: 97%;
      height: 5rem;
      // margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: "宋体";
      position: relative;
      // border: 1px solid red;
      position: relative;

      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }
      .el-icon-full-screen {
        line-height: 3rem;
        margin-left: 5rem;
      }
    }

    .bottom-content {
      width: 97%;
      display: flex;
      justify-content: center;
      height: 63.57rem;
      background: #ffffff;
      border-radius: 0.43rem;
      .bottom-box {
        width: 97%;
        // display: flex;
        // position: relative;
        
        // 分页按钮适配
        /deep/.btn-prev {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 3.357143rem;
        }
        /deep/.btn-next {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 3.357143rem;
        }
        /deep/.el-pagination.is-background .el-pager li {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 2.357143rem;
          line-height: 4rem;
        }
        /deep/.el-pagination .btn-prev .el-icon {
          font-size: 3.357143rem;
        }
        /deep/.el-pagination .btn-next .el-icon,
        .el-pagination .btn-prev .el-icon {
          font-size: 3.357143rem;
        }
        /deep/.el-pagination__total {
          font-size: 1.928571rem;
          line-height: 4rem;
        }
      }
      .search-box {
        width: 100%;
        display: flex;
        // justify-content: space-around;
        margin-top: 3rem;
        margin-bottom: 1rem;

        // 调整label的大小
        /deep/.el-form-item__label {
          font-size: 2.2rem;
          // display: flex;
          line-height: 4rem;
          font-weight: bold;
          align-items: center;
          font-family: "微软雅黑";
          // font-weight: bold;
          color: #4f5a64;
          padding-right: 2rem;
          padding-top: 0.2rem;
          margin-left: 2rem;
        }
      }
    }
  }
}

// 调整button的宽高
.my-el-search {
  // /deep/ .el-icon-search {
  //   margin-right: 0.1rem;
  // }

  .el-button {
    // margin-left: 4rem;
    text-align: center;
    width: 10rem;
    height: 2.6rem;
    font-size: 2rem;
  }
}

// 调整select的宽高
.my-el-select {
  // width: 17.37rem;
  margin-right: 5rem;

  /* selecte 框的高度设置，默认是 40px*/
  /deep/ .el-input__inner {
    height: 4.5rem;
    width: 25rem;
    font-size: 1.86rem;
    padding-left: 2rem;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 5px;
  }

  //    icon样式设置
  /deep/.el-input__icon {
    font-size: 0;
  }

  .el-input__suffix-inner {
    display: inline-block;
  }
  /deep/.el-date-editor .el-range-separator {
    margin: 0 1rem;
    line-height: 4.285714rem;
    font-size: 1.86rem;
    width: 10%;
  }
  /deep/.el-range-editor.el-input__inner {
    padding: 0;
  }
  /deep/.el-date-editor .el-range-input {
    width: 100%;
    font-size: 1.86rem;
  }
  ::v-deep .el-select-dropdown__item {
    font-size: 2.16rem;
    height: 4.428571rem;
    line-height: 4.428571rem;
  }
  ::v-deep.el-input--small .el-input__inner {
    height: 4rem;
    width: 10rem !important;
    font-size: 1.3rem;
    text-align: center;
    padding: 0;
  }
}
</style>
